<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>房产：{{ house }}</h4>
    <button @click="changeToy">修改Child1的玩具</button>
    <button @click="changeComputer">修改Child2的电脑</button>
    <button @click="changeRefs($refs)">查看所有被ref属性标识的DOM元素或者组件的实例</button>
    <button @click="getAllChild($refs)">让所有孩子的书变多</button>
    <Child1 ref="c1" />
    <Child2 ref="c2" />
    <!-- 
				$refs 
					值为对象，包含所有被`ref`属性标识的`DOM`元素或组件实例。
					其中的参数是所有拥有ref标识的组件或者DOM元素
					我们一般可以通过方法设置一个形参,再在触发的过程中给予$refs
					来获取,然后我们几获取到了每个组件的实例对象
					如c1,c2
					从而操作c1,c2的数据,但是我们得把数据给暴露出去,默认没有使用宏方法
					defineExpose({toy,book})
					调用把数据暴露出去的话,我们虽然也会获得组件的实例对象,但是没有数据
				
				$parent
					值为对象，当前组件的父组件实例对象。
					如果父组件是顶部组件,那么为null
					可以在子组件中通过调用$parent来使用其父组件中的值

				
		 -->
  </div>
</template>
<script setup lang="ts" name="Father">
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import { ref, reactive } from 'vue';

let c1 = ref();
let c2 = ref();
// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
/* let obj = reactive({
	a:1,
	b:2,
	c:ref(3)
})
let x = ref(4)

console.log(obj.a)
console.log(obj.b)
console.log(obj.c)
console.log(x) */
// 数据
let house = ref(4);
// 方法
function changeToy() {
	c1.value.toy = '小猪佩奇';
}
function changeComputer() {
	c2.value.computer = '华为';
}
function getAllChild(refs: { [key: string]: any }) {
	console.log(refs);
	for (let key in refs) {
		refs[key].book += 3;
	}
}
function changeRefs(refs: any) {
	console.log(refs);

}
// 向外部提供数据
defineExpose({ house });
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-bottom: 10px;
	margin-left: 10px;
}
</style>
